<template>
    <!-- 弹出框 -->
    <el-dialog v-model="store.state.homeview.dialogFormVisible" title="编辑信息">
        <el-form :model="store.state.homeview.editForm" :label-width="formLabelWidth">
            <el-form-item label="编号" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.editForm.id" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.editForm.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="房源类型" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.editForm.type" autocomplete="off" />
            </el-form-item>
            <el-form-item label="门牌号" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.editForm.num" autocomplete="off" />
            </el-form-item>
            <el-form-item label="房源户型" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.editForm.hometype" autocomplete="off" />
            </el-form-item>
            <el-form-item label="户主" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.editForm.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="toggleDialog">取消</el-button>
                <el-button type="primary" @click="handelsubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script setup lang="ts">
import { reactive, ref,defineEmits,onMounted } from 'vue'
// 引用useStore
import { useStore } from "vuex";
// 引入饿了么ui的弹出框
import { ElMessage, } from 'element-plus'
import link from '@/api/apis';
// 得到store对象
const store = useStore();
const formLabelWidth = '140px'
// const form = reactive({
//     name: '',
//     region: '',
//     date1: '',
//     date2: '',
//     delivery: false,
//     type: [],
//     resource: '',
//     desc: '',
// })
const toggleDialog=()=>{
  // 调用vuex修改弹出框状态
  store.commit("SET_DIALOG")
  ElMessage({
        type: 'info',
        message: '已取消！',
    })
}
//模拟触发父组件自定义事件，达到更改后刷新列表目的
const emit = defineEmits(['getList'])

const handelsubmit=()=>{
    // console.log(555,store.state.homeview.editForm);
   link(`/userlist/${store.state.homeview.editForm.id}`, 'put', store.state.homeview.editForm).then(res => {
        if (res.status === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功！',
            })
            emit('getList')
        } else {
            ElMessage({
                type: 'error',
                message: '修改失败！',
            })
        }
        // 调用vuex修改弹出框状态
        store.commit('SET_DIALOG')
    })
}

</script>


<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

/* .el-input {
    width: 300px;
} */

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>